import React from 'react'
import { Form, Select, Input, Button} from 'antd'
import PropTypes from 'prop-types'
import {withRouter} from "react-router-dom"
import API from "../../api/business/business";
const FormItem = Form.Item
const Option = Select.Option

// const Search = Input.Search

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        shop_name: '',
        canChang: true
    }
    componentDidMount () {
        this.getStoreList()
    }
    componentWillReceiveProps (nextProps) {
        if (!this.state.canChang) return
        this.setState({shop_name: nextProps.shop_name})
    }
    createGoods = () => {
        this.props.history.push("/goods/detail/select", {shop_id: this.props.shop_id})
    }
    handleReset = () => {
        this.props.doSearch({clear: true, shop_name: ''})
        this.setState({canChang: false, shop_name: ''}, () => {
            this.props.form.resetFields()

        })
    }
    getStoreList = () => {
        let query = {pageSize: 10000, page: 1}
        API.getStoreList(query).then(res => {
            if (res.error === 0) {
                this.setState({storeList: res.data.listData,defaultStroreList: res.data.listData})
            } else {
                console.log(res)
            }
        })
    }
    handleSearch = (e) => {
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            let newValue = {}
            for (let k in values) {
                if (typeof values[k] === 'string') {
                    newValue[k] = values[k].replace(/^\s+|\s+$/g,"")
                } else {
                    newValue[k] = values[k]
                }
            }
            if (this.state.store_id) {
                newValue.store_id = this.state.store_id
            }
            this.props.doSearch(newValue)
        })
    }
    handleKeydown = (e) => {
        if (e.which !== 13) return
        let keyword = this.refs.keyword.input.value.trim()
        if (keyword === '') return
        let arr = []
        this.state.defaultStroreList.forEach(v => {
            if (v.store_name.indexOf(keyword) >= 0 || keyword.indexOf(v.store_name) >= 0) {
                arr.push(v)
            }
        })
        this.setState({storeList: arr})
    }
    changeStore = (e) => {
        this.setState({store_id: e})
    }
    render () {
        const { getFieldDecorator } = this.props.form
        return <Form
            layout="inline"
            className="supplier-filter"
            onSubmit={this.handleSearch}
        >
            <FormItem
                label="商品ID"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('goods_id', {
                })(
                    <Input placeholder="商品ID" />
                )}
            </FormItem>
            <FormItem
                label="商品名称"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('goods_name', {
                })(
                    <Input placeholder="请输入商品名称" />
                )}
            </FormItem>
            <FormItem
                label="归属商家"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('shop_name', {
                    initialValue: this.state.shop_name? this.state.shop_name : ''
                })(
                    <Input placeholder="请输入归属商家" />
                )}
            </FormItem>
            <FormItem className="filter-select" style={{width: 500}}>
                <div className="title" style={{width: 68, display: 'inline-block', verticalAlign: 'text-bottom'}}>在售门店: </div>
                {getFieldDecorator('store_id')(
                    <div style={{width: '400px', height: 28, display: 'inline-block'}}>
                        <Select allowClear placeholder="请选择" style={{ width: 194, float: 'left' }} onChange={this.changeStore}>
                            {this.state.storeList && this.state.storeList.map(v =>  <Option key={v.id} value={v.id}>{v.store_name}</Option>)}
                        </Select>
                        <Input placeholder="输入关键词查找"  style={{ width: 135, float: 'left', height: 28, marginLeft:5 }} ref="keyword" onKeyPress={(e)=>{this.handleKeydown(e)}}/>
                    </div>

                )}
            </FormItem>
            <FormItem className="filter-select">
                <span className="title">上架状态: </span>
                {getFieldDecorator('is_on_sale')(
                    <Select allowClear style={{ width: 194 }} placeholder="选择状态" onChange={this.onWarrantStatusChange} getPopupContainer={triggerNode => triggerNode.parentNode}>
                        <Option value="1" key="1">上架</Option>
                        <Option value="0" key="0">下架</Option>
                    </Select>
                )}
            </FormItem>
            <FormItem className="filter-select">
                <Button type="primary" htmlType="submit" style={{marginRight: 10}} >查询</Button>
            </FormItem>
            <FormItem className="filter-select">
                <a onClick={this.handleReset}>清除条件</a>
            </FormItem>

        </Form>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default withRouter(IcsComponentsSupplierFilter)
